<template>
  <div class="wrapDiv">
    <input
      type="text"
      v-model="name"
      class="goodsEntry"
      @blur="nameBlurFn"
      placeholder="输入名称"
    />

    <input
      type="text"
      v-model="price"
      class="goodsEntry"
      @blur="priceBlurFn"
      placeholder="输入价格"
    />

    <input
      type="text"
      v-model="description"
      class="goodsEntry"
      @blur="descriptionBlurFn"
      placeholder="输入描述"
    />

    <input
      type="text"
      v-model="img"
      class="goodsEntry"
      @blur="imgBlurFn"
      placeholder="输入图片"
    />
  </div>
</template>
<script>
import axios from "axios";
import API_LIST from "@/APIList.config";
export default {
  name: "catalogGoods",
  data() {
    return {
      name: "",
      price: "",
      description: "",
      img: "",
      itemGoodsInfo: {
        n: "",
        p: "",
        d: "",
        i: "",
      },
    };
  },
  methods: {
    nameBlurFn() {
      this.itemGoodsInfo.n = this.name;
      this.isInputCheckFn();
    },
    isInputCheckFn() {
      // console.log(this.itemGoodsInfo);
      let _is = true;
      for (let i in this.itemGoodsInfo) {
        if (!this.itemGoodsInfo[i]) {
          _is = false;
          break;
        }
      }
      if (_is) {
        // console.log("fill all");
        this.$emit("pushGoodsInfo", this.itemGoodsInfo);
      } else {
        // console.log("one empty");
        this.$emit("isVoidFalse");
      }
    },
    priceBlurFn() {
      this.itemGoodsInfo.p = this.price;
      this.isInputCheckFn();
    },
    descriptionBlurFn() {
      this.itemGoodsInfo.d = this.description;
      this.isInputCheckFn();
    },
    imgBlurFn() {
      this.itemGoodsInfo.i = this.img;
      this.isInputCheckFn();
    },
  },
};
</script>

<style type="text/css">
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.cle:after {
  content: ".";
  overflow: hidden;
  visibility: hidden;
  height: 0;
  display: block;
  clear: both;
}
.wrapDiv {
  width: 80%;
  overflow: hidden;
  border: 1px solid #666;
  background: #eee;
  border-radius: 10px;
  margin: 10px auto;
}
.wrapDiv p.tip {
  font-size: 22px;
  text-align: center;
  padding: 0;
  margin: 5px 0;
  color: #666;
}
.goodsEntry {
  float: left;
  width: 30%;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid #999;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
}
</style>